<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>更新物流 - 物流追踪系统</title>
    <link rel="stylesheet" href="../../css/styles.css">
    <link rel="stylesheet" href="../../css/responsive.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <header>
        <div class="container header-container">
            <div class="logo">
                <h1>物流追踪系统</h1>
            </div>
            <nav class="main-nav">
                <ul>
                    <li><a href="../../index.html">首页</a></li>
                    <li><a href="dashboard.html">物流员中心</a></li>
                    <li><a href="update.html" class="active">更新物流</a></li>
                    <li><a href="#" id="logout-btn">退出登录</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main class="container">
        <div class="card">
            <div class="card-header">
                <h2>更新物流状态</h2>
            </div>
            <div class="update-form-container">
                <form id="update-form">
                    <div class="form-group">
                        <label for="tracking-number">运单编号</label>
                        <input type="text" id="tracking-number" name="tracking-number" required>
                    </div>
                    <div class="form-group">
                        <label for="status">新状态</label>
                        <select id="status" name="status" required>
                            <option value="pending">待发货</option>
                            <option value="in-transit">运输中</option>
                            <option value="out-for-delivery">派送中</option>
                            <option value="delivered">已送达</option>
                            <option value="cancelled">已取消</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="location">当前位置</label>
                        <input type="text" id="location" name="location" placeholder="例如：北京市朝阳区">
                    </div>
                    <div class="form-group">
                        <label for="notes">备注信息</label>
                        <textarea id="notes" name="notes" rows="4" placeholder="可选备注信息"></textarea>
                    </div>
                    <button type="submit" class="btn-primary">更新状态</button>
                </form>
            </div>
        </div>

        <div id="loading" style="display: none; text-align: center; padding: 20px;">
            <div class="spinner"></div>
            <p>更新中，请稍候...</p>
        </div>

        <div id="update-result" class="card" style="display: none;"></div>
    </main>

    <footer>
        <div class="container">
            <p>&copy; 2023 物流追踪系统 版权所有</p>
        </div>
    </footer>

    <script type="module">
        import authService from '../../js/auth.js';
        import Utils from '../../js/utils.js';
        import courierUpdate from '../../js/modules/courier-update.js';

        // 退出登录
        document.getElementById('logout-btn').addEventListener('click', (e) => {
            e.preventDefault();
            authService.logout();
        });

        // 表单提交
        document.getElementById('update-form').addEventListener('submit', (e) => {
            e.preventDefault();
            const trackingNumber = document.getElementById('tracking-number').value;
            const status = document.getElementById('status').value;
            const location = document.getElementById('location').value;
            const notes = document.getElementById('notes').value;

            if (trackingNumber) {
                // 显示加载状态
                document.getElementById('loading').style.display = 'block';
                // 隐藏结果
                document.getElementById('update-result').style.display = 'none';

                // 模拟API请求延迟
                setTimeout(() => {
                    // 更新物流状态
                    courierUpdate.updatePackageStatus(trackingNumber, status, location, notes);
                    // 隐藏加载状态
                    document.getElementById('loading').style.display = 'none';
                }, 1000);
            } else {
                Utils.showNotification('请输入运单编号', 'warning');
            }
        });
    </script>
</body>
</html>